/**
 * 基础数据管理
 */
import React from 'react';
import $ from 'jquery';


import Map from './map/index.jsx';

import NavTitle from './navleft/NavTitle.jsx';
import PointLayerControl from './navleft/maplayers/PointLayer.jsx';
import RegionLayerControl from './navleft/maplayers/RegionLayer.jsx';

import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../../../constants/TodoFilters';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";


class BaseDataContent extends React.Component{
  constructor(props) {
    super(props);

    this.state = {
      data_regions: [],
      data_points: [],
      data_points_forlist: [],
      data_regions_forlist: [],
      selectedRegion: null,
      clickedRegion: null,
      changeType: null,
      selectedPoint: null,
      clickedPoint: null,
      data_points_from_map: [],
      data_regions_from_map: []
    }
    
    this.loadRegionData = this.loadRegionData.bind(this);
    this.loadPointData = this.loadPointData.bind(this);
  }
  
  componentDidMount() {
    this.loadPointData();
    this.loadRegionData();
  }

  /**
   * 解决点击路由，地图页跟着变化的问题
   */
  componentWillReceiveProps(nextProps) {
    this.setState({
      changeType: ""
    })
  }

  loadRegionData() {
    var that = this;
    $.ajax('/src/data/data-region.json')
    .done(function(data){
        that.setState({
            data_regions: data.result,
            data_regions_forlist: data.result
        });
        that.refreshRegionsOnMap(data.result);
    });
  }

  loadPointData() {
    var that = this;
    $.ajax('/src/data/data-points.json')
    .done(function(data){
        that.setState({
          data_points: data.result.records,
          changeType: "refreshPoints",
          data_points_forlist: data.result.records
        });
    });
  }

  refreshRegionsOnMap(data) {
    this.setState({
      data: data,
      changeType: "refreshRegions"
    });
  }


  /**
   * 左侧菜单选择区划
   */
  selectRegion(region, type) {
    this.setState({
      selectedRegion: region,
      changeType: type
    })
  }

  /**
   * 地图中选择区划
   */
  clickRegion(region) {
    this.refs.regioncontrol.clickRegion(region);
  }

  /**
   * 地图中选择网点
   */
  clickPoint(point) {
    this.refs.pointcontrol.clickPoint(point);
  }

  /**
   * 左侧菜单选择网点
   */
  selectPoint(point, type) {
    this.setState({
      selectedPoint: point,
      changeType: type
    });
  }

  /**
   * 地图上的点更新时，左侧菜单也更新
   */
  refreshPointsInList(points) {
    var data = points.concat(this.state.data_points_forlist);
    this.setState({
      data_points_forlist: data,
      changeType: ""
    });
  }

  /**
   * 地图上的面更新时，左侧菜单也更新
   */
  refreshRegionsInList(regions) {
    var data = regions.concat(this.state.data_regions_forlist);
    this.setState({
      data_regions_forlist: data,
      changeType: ""
    });
  }

  render() {
    let {todos, actions} = this.props;
    return (
      <div className="body-container">
            
        <div className="nav-vertical" id="navvertical">
          <NavTitle />
          <div className="layers-control">
            <PointLayerControl ref="pointcontrol"
              titleName="网点图层"
              data={this.state.data_points_forlist}
              selectPoint={this.selectPoint.bind(this)}
              clickedPoint={this.props.clickedPoint}
            />
            <RegionLayerControl ref="regioncontrol"
              titleName="区划图层"
              data={this.state.data_regions_forlist} 
              selectRegion={this.selectRegion.bind(this)}
              clickedRegion={this.props.clickedRegion}
            />
          </div>
        </div>

        <Map dataRegions={this.state.data} 
          dataPoints={this.state.data_points}
          selectedRegion={this.state.selectedRegion}
          selectedPoint={this.state.selectedPoint}
          changeType={this.state.changeType}
          clickRegion={this.clickRegion.bind(this)}          
          clickPoint={this.clickPoint.bind(this)}
          refreshPointsInList={this.refreshPointsInList.bind(this)}
          refreshRegionsInList={this.refreshRegionsInList.bind(this)}
        />
      </div>
    );
  }
};

export default BaseDataContent;





